<template>
  <div class="cellBox list-b-8" :class="{
    isAuto: isAuto,
  }">
    <div class="cellBox-head" :class="{
      titleBg: isTitleBg,
    }" v-if="title">
      <div class="flex-center-center list-r-8">
        <h3 class="f-14">
          {{ title }}
        </h3>
        <el-tooltip effect="dark" :content="hint" placement="top" :disabled="!hint" v-if="hint">
          <el-icon>
            <Warning />
          </el-icon>
        </el-tooltip>
      </div>
      <div class="flex-start-center list-r-12" v-if="$slots.btn">
        <slot name="btn" />
      </div>
    </div>
    <div class="cellBox-main" :class="{
      'bg-color-white': isTop,
    }" :style="{
      padding: isTop ? padding + 'px' : 0,
    }" ref="main">
      <slot :height="height" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const props = withDefaults(
  defineProps<{
    title?: string;
    padding?: number;
    isTop?: boolean;
    isTitleBg?: boolean;
    isAuto?: boolean;
    hint?: string;
  }>(),
  {
    padding: 12,
  },
);
const main = ref();
// 一个计算属性
const height = computed(() => {
  let height = 0;
  let el = main.value;
  if (props.isAuto && el) {
    height = el.clientHeight;

  }
  return height;
});
</script>
<style scoped lang="scss">
.cellBox {
  .cellBox-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    h4 {
      flex: 1;
      color: $black;
    }

    &.titleBg {
      background-color: #{$hover};
      padding: 8px 12px;
      border-radius: 2px;
    }
  }

  &:not(:last-child) {
    margin-bottom: 12px;
  }

  .cellBox-main {
    position: relative;

    &.flexAuto {
      .tableBox {
        padding: 0 !important;
      }
    }

    >.FormItem {
      &:last-child {
        margin-bottom: 0 !important;
      }
    }
  }

  &.isAuto {
    flex: 1;
    display: flex;
    flex-direction: column;

    .cellBox-main {
      flex: 1;
      overflow: hidden;
    }
  }
}
</style>
